import React from 'react'
import styles from './index.module.css'
import { NavBar, Tag } from 'antd-mobile';
import { NoticeBar, Swiper } from 'react-vant'
import tw from '../../assets/图文问诊.png'
import dh from '../../assets/S_电话问诊（国寿）.png'
import sp from '../../assets/视频问诊.png'
import { useNavigate } from 'react-router-dom'
import mjs from '../../assets/极速问诊.jpg'
import doctors from '../../assets/doctors.png'
import { Play } from '@react-vant/icons';
const Index: React.FC = () => {
    const navigate = useNavigate()
    return (
        <div>
            <div>
                <NavBar onBack={() => navigate(-1)} style={{ backgroundColor: '#fff' }}>极速问诊</NavBar>
            </div>
            <div className={styles.msg_jisu}>
                <img src={mjs} style={{ width: '100%',height:'150px' }} alt="" />
                <div className={styles.msg_jisu_content}>
                    <NoticeBar className={styles.notice_bar}>
                        <Swiper
                            autoplay={3000}
                            indicator={false}
                            vertical
                            className={styles.notice_swipe}
                        >
                            <Swiper.Item className={styles.notice_swipe_item}>发起了图文定向问诊￥10.00</Swiper.Item>
                            <Swiper.Item className={styles.notice_swipe_item}>发起了图文定向问诊￥35.00</Swiper.Item>
                            <Swiper.Item className={styles.notice_swipe_item}>发起了图文定向问诊￥29.00</Swiper.Item>
                        </Swiper>
                    </NoticeBar>
                </div>
            </div>
            <div className={styles.msg_doctor}>
                <div className={styles.msg_doctor_content}>
                    <div className={styles.msgdoctor}>
                        <p>值班医生</p>
                        <img src={doctors} className={styles.doctor_img} alt="" />
                    </div>
                    <div className={styles.msgdoctor}>
                        <p>服务承诺</p>
                        <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#1e6fff', display: 'inline_block' ,marginLeft: '10px',marginTop:'15px',marginRight:'10px'}}></span> 
                        <span> 实名认证医生</span>
                    </div>

                </div>
            </div>


            <div className={styles.msg_doctor_content_info}>
                <div className={styles.msg_box}>
                    <div className={styles.msg_doctor_content_info_left}>
                        <img src={tw} alt="" />
                        <span style={{ marginTop: "10px" }}>极速图文问诊 <Tag color='#ff6430' fill='outline' round>
                            推荐
                        </Tag></span>
                        <h2 className={styles.msg_doctor_content_info_left_price}>6.90<Play color='#999' fontSize='20px' /></h2>
                    </div>
                    <div className={styles.msg_zbox}>
                        <p>平均3分钟接诊，交流时长：30条消息/30分钟</p>
                    </div>
                </div>
                <div className={styles.msg_box}>
                    <div className={styles.msg_doctor_content_info_left}>
                        <img src={dh} alt="" />
                        <span style={{ marginTop: "10px" }}>极速电话问诊</span>
                        <h2 className={styles.msg_doctor_content_info_left_price}>30.00<Play color='#999' fontSize='20px' /></h2>
                    </div>
                    <div className={styles.msg_zbox}>
                        <p>平均10分钟响应，通话时长：10分钟</p>
                    </div>
                </div>

                <div className={styles.msg_box}>
                    <div className={styles.msg_doctor_content_info_left}>
                        <img src={sp} alt="" />
                        <span style={{ marginTop: "10px" }}>极速视频问诊</span>
                        <h2 className={styles.msg_doctor_content_info_left_price}>50.00<Play color='#999' fontSize='20px' /></h2>
                    </div>
                    <div className={styles.msg_zbox}>
                        <p>平均10分钟响应，通话时长：10分钟</p>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Index